<!--

    Copyright 2017, Huawei Technologies Co., Ltd.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->

<div class="col-md-12 col-sm-12 col-lg-12" ng-init="init()">

    <div id="lcTableAction">
        <!--<button ng-click="showAddModal()" class="btnDefault pull-left">Add</button>-->
        <!--<button ng-click="deleteData()" class="btnDefault pull-left prvdel">Delete Selected</button>-->
    </div>
    <br>
    <div class="panel panel-default">
    <table ng-table="tableParams" class="table table table-striped table-hover table-bordered lctable" show-filter="true">
            <tr ng-repeat="lcData in $data" ui-sref=".lcTabs({id: lcData.serviceId})" ui-sref-active="selected-row" ui-sref-opts="{reload: false}"><!--target="_self" ng-click="setClickedRow($index, lcData.serviceId)" -->
            <!--<td header="'ng-table/headers/checkbox.html'">
                <input type="checkbox" ng-model="checkboxes.items[lcData.serviceId]" />
            </td>-->
            <td  title="'Service Name'" filter="{ serviceName: 'text'}" sortable="'serviceName'">
                <!--<a data-toggle="modal" class="srvname" ng-click="callModal(lcData.id)">{{lcData.name}}</a>-->
                <a data-toggle="modal" ng-click="test(lcData.serviceId)" href="#popupModal" class="srvname">{{lcData.serviceName}}</a>
                <!--<a data-toggle="modal" ng-href="#popupModal" class="srvname">{{lcData.name}}</a>--><!-- ui-sref=".modal1"-->
            </td>
            <td title="'Template Name'" filter="{ templateName: 'text'}" sortable="'templateName'">
                {{lcData.templateName}}</td>
            <td title="'Create time'" filter="{ createtime: 'text'}" sortable="'createtime'">
                {{lcData.createtime}}</td>
            <td title="'Creator'" filter="{ creator: 'text'}" sortable="'creator'">
                {{lcData.creator}}</td>
            <td title="'Action'">
                <!--<img src="../images/delete.png" ng-click="editData(lcData.id)" style="cursor: pointer"></img>-->
                <!--<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(lcData.serviceId)" style="cursor: pointer;margin: 0 5px"></span>-->
                <span  ng-click="scaleData(lcData.serviceId)" style="cursor: pointer;margin: 0 5px"><img src="/openoui/framework/browser/thirdparty/images/edit.png" height="15" align="left"/></span>
				<span  ng-click="deleteIndividualData(lcData.serviceId)" style="cursor: pointer;margin: 0 5px"><img src="/openoui/framework/browser/thirdparty/images/delete.png" height="15" align="middle"/></span>
            </td>
        </tr>
    </table>
    </div>

    <script type="text/ng-template" id="ng-table/headers/checkbox.html">
        <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />
    </script>

    <ui-view></ui-view>
</div>

<div id="popupModal" class="modal fade modal-lg" role="dialog">
    <ui-view></ui-view>
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5 class="modal-title titlestyle">Create</h5>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs">
                    <li class="active col-md-6 col-sm-6 col-xs-6 nopadding "><a data-toggle="tab" data-target="#base" class="nomargin">Base</a></li>
                    <li class="col-md-6 col-sm-6 col-xs-6 nopadding"><a data-toggle="tab" data-target="#templateParameters" class="nomargin" ng-click="templateParam()">Template Parameters</a></li>
                </ul>
                <div class="tab-content">
                    <div id="base" class="tab-pane fade in active">
                        <div class="form-group row">
                            <label class="col-xs-4 col-form-label labelstyle">Service Name</label>
                            <div class="col-xs-8 serviceName" >
                                <!--<input class="form-control" ng-model="province.service_name" type="text" value="" placeholder="Service Name"  ng-blur="validatetextbox(province.service_name)" required><br>-->
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-xs-4 col-form-label labelstyle">Service Description</label>
                            <div class="col-xs-8 serviceDescription" >
                                <!--<input class="form-control" ng-model="province.ip" type="ipv4" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" value="" placeholder="IP Address" id="ipaddress" required><br>-->
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-xs-4 col-form-label labelstyle">Service Template</label>
                            <div id="plainDropDown" class="col-xs-8 port">
                                <!--<input class="form-control" ng-model="province.port" type="number" value="" placeholder="Port" id="port"  required>-->
                                <!--<select id="svcTempl" class="form-control" ng-modal="lifecycleData.optSelect" ng-options="item.serviceTemplateId as item.templateName for item in someOptions">

                                </select>-->
                                <select id="svcTempl" class="form-control" ng-model="lifecycleData.optSelect" ng-options="item.templateName for item in optionsValue"></select>
                            </div>
                        </div>
                    </div>
                    <div id="templateParameters" class="tab-pane fade">

                    </div>
                </div>
                <div id="footerBtns" class="modal-footer"></div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="progressDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="margin-left:10px;margin-bottom:5px;">
                <h4 class="modal-title" id="idProgressTitle" style="text-align:center;"></h4>
            </div>
            <div class="modal-body" style="margin-left:10px;margin-bottom:5px;margin-right:10px;">
                <div class="progress">
                    <div id="progressbar" class="progress-bar" role="progressbar" style="width: 10%;">
                        <span id ="progressValue">0%</span>       
                    </div>
                </div>
               <div id="progressContent"></div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="errorDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" 
                        aria-hidden="true">��
                </button>
                <h4 class="modal-title" id="errorDialogTitle"  style="text-align:center;"></h4>
            </div>
            <div class="modal-body" id = "errorDialogReason" style="margin-left:20px;margin-bottom:5px;margin-right:10px;"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
            </div>
        </div>
    </div>
</div>

<!--scale option dialog-->
<div id="scaleOptionDialog" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5 class="modal-title titlestyle">Scale Option</h5>
            </div>
            <div class="modal-body">
                <div class="form-group row" style="height:26px;margin-top:15px; margin-left:25px;">
                    <span class="col-xs-3" style="margin-left:20px">
                        <input type="radio" id="scalingTypeIn"/>  Scale In
                    </span>
                    <span class="col-xs-offset-2 col-xs-3">
                        <input type="radio" id="scalingTypeOut"/>  Scale Out
                    </span>
                </div>
                <div class="form-group row" style="margin-left:25px;">
                    <label class="col-xs-3 control-label">
                        <span>Scaling Aspect</span>
                        <span class="required">*</span>
                    </label>
                    <div class="col-xs-7">
                        <input type="text" id="scalingAspect" name="scalingAspect" class="form-control" maxlength="256"/>
                    </div>
                </div>
                <div class="form-group row" style="margin-left:25px;">
                    <label class="col-xs-3 control-label">
                        <span>Number of Steps</span>
                        <span class="required">*</span>
                    </label>
                    <div class="col-xs-7">
                        <input type="text" id="numberOfSteps" name="numberOfSteps" class="form-control"  maxlength="256"/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" style="width:80px;" class="btn SDBtn" data-dismiss="modal"
                            aria-hidden="true" id="scaleNS">
                        <span>OK</span>
                    </button>
                    <button type="button" style="width:80px;" class="btn button-previous SDBtn" data-dismiss="modal">
                        <span>Cancel</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--scale progress bar-->
<div class="modal fade" id="scaleProgressDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="margin-left:10px;margin-bottom:5px;">
                <h4 class="modal-title" id="idScaleProgressTitle" style="text-align:center;"></h4>
            </div>
            <div class="modal-body" style="margin-left:10px;margin-bottom:5px;margin-right:10px;">
                <div class="progress">
                    <div id="scaleProgressbar" class="progress-bar" role="progressbar" style="width: 10%;">
                        <span id ="scaleProgressValue">0%</span>
                    </div>
                </div>
                <div id="scaleProgressContent"></div>
            </div>
        </div>
    </div>
</div>
